<template>
  <div class="init">
      <div class="top_item" @click="jump('/form/sale')">
        <i class="el-icon-s-grid"></i>
        <div class="item_right">
          <span class="item_title">销售报表</span>
          <span class="item_remark">统计所有的销售流水及汇总统计</span>
        </div>
      </div>
      <div class="top_item" @click="jump('/form/buy')">
        <i class="el-icon-s-grid"></i>
        <div class="item_right">
          <span class="item_title">采购报表</span>
          <span class="item_remark">统计所有的采购流水及汇总统计</span>
        </div>
      </div>
      <div class="top_item" @click="jump('/form/cost')">
        <i class="el-icon-s-grid"></i>
        <div class="item_right">
          <span class="item_title">支出报表</span>
          <span class="item_remark">统计其他的费用支出及汇总统计</span>
        </div>
      </div>
      <div class="top_item" @click="jump('/form/check')">
        <i class="el-icon-s-grid"></i>
        <div class="item_right">
          <span class="item_title">产品盘点表</span>
          <span class="item_remark">统计每月产品的库存,及货损盈亏情况</span>
        </div>
      </div>
      <div class="top_item" @click="jump('/form/result')">
        <i class="el-icon-s-grid"></i>
        <div class="item_right">
          <span class="item_title">员工销售业绩表</span>
          <span class="item_remark">统计员工的销售业绩</span>
        </div>
      </div>
      <div class="top_item" @click="jump('/form/year')">
        <i class="el-icon-s-grid"></i>
        <div class="item_right">
          <span class="item_title">公司年报</span>
          <span class="item_remark">统计公司每年的营收盈亏情况</span>
        </div>
      </div>
      <!--<div class="top_item">
        <i class="el-icon-s-grid"></i>
        <div class="item_right">
          <span class="item_title">客户分析表</span>
          <span class="item_remark">分析每个客户的购买情况</span>
        </div>
      </div>
      <div class="top_item">
        <i class="el-icon-s-grid"></i>
        <div class="item_right">
          <span class="item_title">供应商分析表</span>
          <span class="item_remark">分析每个供应商的采购情况</span>
        </div>
      </div>
      <div class="top_item">
        <i class="el-icon-s-grid"></i>
        <div class="item_right">
          <span class="item_title">客户对账表</span>
          <span class="item_remark">分析每个供应商的采购情况</span>
        </div>
      </div>-->
  </div>
</template>
 
<script>
export default {
  name: "fotmTable",
  data() {
    return {
    }
  },
  created: function() {
    
  },
  methods: {
    jump:function(url,id){
      this.$router.push({path :url,query:{id:0}})
    },
  }
};
</script>
<style>
.init{
    padding:15px 20px 10px 0;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    flex-wrap:wrap;
    background:#e6e6e6;
}
.top_item{
    width:28%;
    height:100px;
    border-radius:10px;
    border:1px solid #d9d9d9;
    background:#ffff;
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    padding-left:20px;
    margin-left:15px;
    margin-top:20px;
}
.top_item i{
  width:50px;
  height:50px;
  font-size:50px;
}
.item_right{
  display:flex;
  flex-direction:column;
  padding-left:20px;
}
.item_title{
  font-size:17px;
  font-weight:bold;
}
.item_remark{
  margin-top:10px;
  color:#999999;
  font-size:14px;
}
</style>